<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="css/swiper.min.css">
		<style>
			html,
			body {
				position: relative;
				height: 100%;
			}

			body {
				margin: 0;
				padding: 0;
			}

			.swiper-container {
				width: 100%;
				height: 100%;
				margin: 0 auto;
			}

			.swiper-slide {
				background-position: center;
				background-size: cover;
			}

			.gallery-top {
				width: 100%;
				height: 80%;
			}

/* width=border+content;宽高用百分比相对单位布局时不用考虑border */
			.gallery-thumbs {
				width: 100%;
				height: 20%;
				padding: 10px 0;
				box-sizing: border-box;   
			}

			.gallery-thumbs .swiper-slide {
				width: 25%;
				height: 100%;
				opacity: 0.4;
			}

			.gallery-thumbs .swiper-slide-active {
				opacity: 1;
			}
		</style>
	</head>
	<body>
		<div class="swiper-container gallery-top">
			<div class="swiper-wrapper">
				<div class="swiper-slide" style="background-image:url(images/ad-01.jpg)"></div>
				<div class="swiper-slide" style="background-image:url(images/ad-02.jpg)"></div>
				<div class="swiper-slide" style="background-image:url(images/ad-03.jpg)"></div>
				<div class="swiper-slide" style="background-image:url(images/ad-04.jpg)"></div>
			</div>
			<div class="swiper-button-next swiper-button-white"></div>
			<div class="swiper-button-prev swiper-button-white"></div>
		</div>
		<div class="swiper-container gallery-thumbs">
			<div class="swiper-wrapper">
				<div class="swiper-slide" style="background-image:url(images/ad-01.jpg)"></div>
				<div class="swiper-slide" style="background-image:url(images/ad-02.jpg)"></div>
				<div class="swiper-slide" style="background-image:url(images/ad-03.jpg)"></div>
				<div class="swiper-slide" style="background-image:url(images/ad-04.jpg)"></div>
				<div class="swiper-slide" style="background-image:url(images/ad-01.jpg)"></div>
			</div>
		</div>

		<script src="js/swiper.min.js"></script>
		<script>
			var galleryTop = new Swiper(".gallery-top", {    
				spaceBetween: 30,
				nextButton: ".swiper-button-next",
				prevButton: ".swiper-button-prev",
				loop: true,
				loopedSlides: 4, //上下相关的轮播图数量相同  总体轮播图数量可以多于这个数量
			});
			var galleryThumbs = new Swiper(".gallery-thumbs", {
				spaceBetween: 10,
				slidesPerView: "auto",
				centeredSlides: true,
				slideToClickedSlide: true, // 滑动到当前点击的滑块，即点击缩略图时实现切换
				loop: true,
				loopedSlides: 4, //上下相关的轮播图数量相同
			});
			//.params.control方法给轮播图添加另一个轮播图用于控制
			galleryTop.params.control = galleryThumbs; //设置galleryTop控制galleryThumbs
			galleryThumbs.params.control = galleryTop; //设置galleryThumbs控制galleryTop
		</script>
	</body>
</html>
